<template>
  <BaseMainSlot :show-search-box="false">
    <!-- 摄像头管理 -->
    <template v-slot:btn-box>
      <ActionBar
        :page-no="113"
        :add-active="addActive"
        :del-active="delActive"
        @add="add"
        @del="del"
      />
    </template>
    <template v-slot:table-box>
      <div class="farm-main">
        <div class="tr-sid">
          <div class="sid-head">左边导航栏</div>
          <div class="sid-tree">
            <treeSide @treeselectvalue="treeselectvalue" />
          </div>
        </div>
        <div class="tab-box">
          <el-table
            v-loading="loading"
            highlight-current-row
            :data="tableData"
            stripe
            border
            height="calc(100% - 50px)"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" :selectable="selectable"/>
            <el-table-column type="index" label="序号" width="100" />
            <el-table-column prop="camera.cameraName" label="摄像头名称" />
            <el-table-column prop="camera.deviceSerial" label="序列号" />
            <!--            <el-table-column prop="verificationCode" label="设备验证码" />-->
            <el-table-column label="操作" width="100">
              <template
                v-if="scope.row.cameraFacilityMapperId"
                slot-scope="scope"
              >
                <el-button
                  v-if="judgePermission(113, 'delete')"
                  class="text-btn-cursor cursor-delete"
                  type="text"
                  size="small"
                  @click="handleDelete(scope.row)"
                >
                  删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <Pagination
            :page-size="pageSize"
            :current-page="currentPage"
            :total-size="totalSize"
            @changePageSize="changePageSize"
            @changeCurrentPage="changeCurrentPage"
          />
        </div>
      </div>
    </template>
    <template v-slot:dialog>
      <el-dialog
        title="添加相机"
        :visible.sync="addcameraVisible"
        width="400px"
        :close-on-click-modal="false"
      >
        <span slot="title">
          {{ facilityName }}
        </span>
        <p class="dialog-body">
          <span>
            选择摄像头：
          </span>
          <el-select
            v-model="nowcameraindex"
            placeholder="选择摄像头"
            value-key="cameraNo"
            multiple
            filterable
            @change="cameraChange"
          >
            <el-option
              v-for="(item, index) in cameralist"
              :key="index"
              :label="item.cameraName"
              :value="item.cameraNo"
            />
          </el-select>
        </p>
        <!--        <p class="dialog-body">-->
        <!--          <span>-->
        <!--            展示摄像头名称:-->
        <!--          </span>-->
        <!--          <el-input v-model="cameraName" clearable />-->
        <!--        </p>-->
        <span slot="footer" class="dialog-footer">
          <el-button class="zh-button-one" @click="closevisab">取 消</el-button>
          <el-button
            class="zh-button-two"
            type="primary"
            @click="addclickmet"
          >确 定</el-button>
        </span>
      </el-dialog>
    </template>
  </BaseMainSlot>
</template>
<script>
import ActionBar from "@/components/ActionBar";
import treeSide from "@/components/selectbutton/trelist.vue";
import Pagination from "@/components/Pagination";
import nowpagereq from "@/api/basic-info-manage/camera-management/index";
import BaseMainSlot from "@/components/BaseMainSlot/newBaseMainSlot.vue";
import { mymixin } from "@/utils/mixin";
import { mapGetters } from "vuex";
// import { getToken } from '@/utils/auth';
export default {
  name: "CameraManagement",
  components: { ActionBar, treeSide, Pagination, BaseMainSlot },
  mixins: [mymixin],
  data() {
    return {
      // 表格选中id
      tableselectidlist: "",
      // 当前选中地块组名或地亏啊名
      facilityName: "",
      // 当前选中cameraindex
      nowcameraindex: "",
      cameraNoList: [],
      addcameraVisible: false,
      paramslist: {},
      cameralist: [],
      cameraName: "",
      loading: false
    };
  },
  computed: {
    ...mapGetters({
      judgePermission: "permission/judgePermission"
    })
  },
  watch: {
    nowChanceStau(newval) {
      if (newval === "add") {
        this.addcameraVisible = true;
      }
    }
  },
  mounted() {
    this.addActive = false;
    this.getcameralist();
  },
  methods: {
    selectable (row) {
      return !('index' in row)
    },
    // 对话框关闭相关方法
    farmhandleClose(done) {
      console.log(done);
      this.$confirm("取消添加设施？")
        .then(_ => {
          done();
          this.closevisab();
        })
        .catch(_ => {});
    },
    cameraChange(val) {
      // this.cameraName = this.cameralist[val].cameraName
      this.cameraNoList = val;
    },
    closevisab() {
      // this.paramslist = {}
      this.nowcameraindex = "";
      this.nowChanceStau = "";
      this.addcameraVisible = false;
    },
    // 查询所有摄像头列表
    getcameralist() {
      nowpagereq
        .getcameralist({ organizationNo: sessionStorage.organizationNo })
        .then(res => {
          this.cameralist = res.data;
        });
    },
    // 点击树状触发方法
    treeselectvalue(e) {
      let dd = e.organizationNo;
      this.paramslist = {};
      if (!dd) {
        this.addActive = false;
        this.$message.warning("请勿选择此地块组");
        return;
      }
      // console.log(e)
      this.facilityName = e.facilityName;
      this.paramslist["organizationNo"] = e.organizationNo;
      this.addActive = true;
      if (e.facilityGroupNo) {
        this.paramslist["facilityGroupNo"] = e.facilityGroupNo;
      } else if (e.facilityNo) {
        this.paramslist["facilityNo"] = e.facilityNo;
      }
      this.getTableDataList();
    },
    // 获取表格数据
    getTableDataList() {
      let newpar = { ...this.paramslist };
      if (newpar.organizationNo) {
        delete newpar.organizationNo;
      }
      let param = {
        page: this.currentPage,
        size: this.pageSize,
        entity: newpar
      };

      nowpagereq.getlist(param).then(res => {
        this.loading = true;
        let data = res.data.content;
        this.totalSize = res.data.totalElements;
        this.tableData = data;
        this.loading = false;
        this.addblankmet();
        this.resetActionBar();
      });
    },
    // 点击确定---------现在暂无数据
    addclickmet() {
      this.nowChanceStau = "";
      // console.log(this.paramslist)
      // let camerames = { ...this.cameralist[this.nowcameraindex] }
      // this.$set(camerames, 'cameraName', this.cameraName)
      if (this.cameraNoList.length === 0 || !this.cameraNoList) { return this.$messag.warning("请先选择摄像头"); }
      nowpagereq
        .addslist({ cameraNoList: this.cameraNoList, ...this.paramslist })
        .then(res => {
          if (res.code === 0) {
            this.$message.error("添加失败！请检查数据是否完整");
          } else if (res.code === 1) {
            this.$message.success("添加成功");
          }
          this.getTableDataList();
          this.nowcameraindex = "";
          this.addcameraVisible = false;
          this.resetActionBar();
        });
    },
    // 点击表格
    handleSelectionChange(e) {
      let list = e;
      let isblank = false;
      this.tableselectidlist = list.map(item => {
        if (item.cameraFacilityMapperId) {
          return item.cameraFacilityMapperId;
        } else {
          isblank = true;
        }
      });
      if (isblank) {
        this.tableselectidlist = [];
        this.$message.warning("请不要选择空白行");
        return;
      }
      if (this.tableselectidlist.length > 0) {
        this.delActive = true;
      }
    },
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.getTableDataList();
    },
    changeCurrentPage(currentPage) {
      this.currentPage = currentPage;
      this.getTableDataList();
    },
    delmessage() {
      nowpagereq.dellist(this.tableselectidlist).then(res => {
        if (res.code === 0) {
          this.$message.error("删除失败");
        } else if (res.code === 1) {
          this.$message.success("删除成功");
        }
        this.getTableDataList();
      });
    },
    handleDelete(data) {
      // nowpagereq.dellist([data.cameraFacilityMapperId]).then(
      //   res => {
      //     if (res.code === 0) {
      //       this.$message.error("删除失败")
      //     } else if (res.code === 1) {
      //       this.$message.error("删除成功")
      //     }
      //     this.getTableDataList()
      //   }
      // )
      this.$confirm("此操作将永久删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        customClass: "myClass"
      })
        .then(() => {
          nowpagereq.dellist([data.cameraFacilityMapperId]).then(res => {
            if (res.code === 0) {
              this.$message.error("删除失败");
            } else if (res.code === 1) {
              this.$message.success("删除成功");
            }
            this.getTableDataList();
          });
        })
        .catch(() => {
          //
          this.$message("取消删除");
        });
    },
    save() {
      // if(nowChanceStau===''){

      // }
      console.log(this.setnowChanceStau);
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__header {
  // width: 200px;
  color: #fff !important;
}
::v-deep .el-dialog__wrapper {
  .el-dialog {
    width: 25vw !important;
  }
}
.main {
  width: 100%;
  height: 100%;
}
.farm-main {
  width: 100%;
  // height: calc(100% - 110px);
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  .tr-sid {
    width: calc(20% - 15px);
    margin-left: 10px;
    margin-right: 5px;
    height: 100%;
    padding: 10px;
    background-color: #074052;
    .sid-head {
      width: 100%;
      height: 30px;
      line-height: 30px;
      font-size: 16px;
      text-align: center;
      border-bottom: #fff dashed 1px;
    }
    .sid-tree {
      width: 100%;
      height: calc(100% - 21px);
    }
  }
  .tab-box {
    width: calc(80% - 10px);
    margin-right: 10px;
    height: 100%;
  }
}
.dialog-body {
  width: 100%;
  display: flex;
  align-items: center;
  span {
    min-width: 140px;
  }
  ::v-deep .el-select {
    width: 100%;
  }
}
</style>
